<!--
 * @Author: your name
 * @Date: 2020-08-02 14:09:07
 * @LastEditTime: 2020-10-18 16:08:24
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \project\羊绒产业园\源码\src\components\common\cell-system.vue
-->
<template>
  <div class="cell-box flex">
    <!-- <van-image v-if="Type === '1'" round width="1.2rem" fit="cover" height="1.2rem" :src="ListData.avatar" ></van-image> -->
    <van-image  round width="1.2rem" fit="cover" height="1.2rem" :src="ListData.avatar" >
      <div class="read-dot" v-if="ListData.unReadNum > 0">{{ ListData.unReadNum }}</div>
     
    </van-image>
      <div class="des">
        <h1 class="flex space-between">
          <span>{{ ListData.nick ? ListData.nick : '姓名'}}</span>
          <i class="time"> {{ ListData.createTime }} </i>
        </h1>
        <div class="p" v-if="Type === '1'">{{ ListData.msgType === 1 ? '【图片】' : ListData.msg }} </div>
        <div class="p" v-else v-html="ListData.content"></div>
      </div>
    
    
    </div>
</template>

<script>
export default {
  props: {
    ListData: {
      type: Object,
      default: () => {}
    },
    Type:{
      type: String,
      default: '2', //1 营商消息 2系统消息
    }
  },
  data() {
    return {};
  },
  methods: {
 
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>

  .cell-box {
    border-radius: 5px;
    padding: 0.3rem;
    box-sizing: border-box;
    background: #fff;
    margin-bottom: .3rem;
    font-size: 0.3rem;
    color: #999;
    /deep/ .van-image{
      overflow: visible;
    }
    /deep/ .read-dot{
      position: absolute;
     width: 16px;
     height: 16px;
     line-height: 16px;
     text-align: center;
     border-radius: 50%;
    background: red;
    top: 0;
    right: 0;
    color: #fff;
    z-index: 0;
    font-size: .2rem;


    }
   
     
        .des{
          padding-left: .2rem;
          flex:1;
            h1 {
        color: #333 ;
        font-size: .34rem;
        align-items: center;
        padding-bottom: .1rem;
        .time{
          font-size: .28rem;
          color: #999;
        }
       
       
      }
      .p{
          font-size: .28rem;
          color: #666;
          line-height: normal;
          text-align: left;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          word-break: break-all;
          max-height: .8rem;
         
        }
        }
  
  }

</style>
